<template>
	<!-- 帮买取快递废品回收-商品管理 -->
	<div>
		<!-- 头部 -->
		<el-row>
			<!-- 面包屑 -->
			<el-col>
				<el-breadcrumb separator="/" style="margin-bottom: 10px;">
					<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/help/store' }">帮买取快递废品回收-商品管理</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<!-- 搜索、操作 -->
			<el-col class="inp">
				<div class="block">
					<span class="demonstration">状态：</span>
					<el-radio-group v-model="show_UpDown">
						<el-radio-button label="全部商品"></el-radio-button>
						<el-radio-button label="上架中"></el-radio-button>
						<el-radio-button label="已下架"></el-radio-button>
					</el-radio-group>
				</div>
				<div class="block">
					<span class="demonstration">商品名称：</span>
					<el-input v-model="select_list.goodsName" placeholder="请输入要查询的商品名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">所属门店：</span>
					<el-input v-model="select_list.goodsShopName" placeholder="请输入要查询的所属门店"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">发布日期：</span>
					<el-date-picker v-model="dataValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="get_value"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="block">
					<el-button type="primary" @click="get_value">搜索</el-button>
				</div>
			</el-col>
		</el-row>
		<!-- 主体 -->
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" border style="width: 100%;" :header-cell-style="tableStyle"
				:cell-style="tableCen">
				<el-table-column prop="goodsId" label="商品ID">
				</el-table-column>
				<el-table-column prop="goodsName" label="商品">
				</el-table-column>
				<el-table-column prop="goodsShopName" label="所属门店">
				</el-table-column>
				<el-table-column prop="goodsSalesVolume" label="销量">
				</el-table-column>
				<el-table-column prop="goodsPresentPrice" label="预估价">
				</el-table-column>
				<el-table-column prop="addTime" label="发布时间" width="160px">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<span style="margin-left: 10px">
							<el-tag :type="scope.row.goodsStatus==1?'success':'danger'">
								{{ scope.row.goodsStatus==1?'上架中':'已下架' }}
							</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="danger" :underline="false"
							@click="modif_Status(scope.row.goodsId, scope.row.goodsStatus)">
							{{ scope.row.goodsStatus==1?'立即下架':'立即上架' }}
						</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<!-- 分页 -->
		<el-row style="text-align: center; margin-top: 20px;">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="select_list.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="select_list.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="select_list.total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 查询显示条件
				select_list: {
					goodsStatus: '',
					goodsName: '',
					goodsShopName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					total: 1
				},
				// 查看上下架
				show_UpDown: '全部商品',
				// 搜索时间差
				dataValue: '',
				// 表格数据
				tableData: [],
				// 样式
				tableStyle: {
					'background-color': '#409eff',
					'color': 'white',
					'text-align': 'center'
				},
				tableCen: {
					'text-align': 'center'
				}
			}
		},
		methods: {
			// 修改状态
			modif_Status(id, status) {
				// console.log(id + ' ' + status)
				status == 1 ? status = 0 : status = 1
				this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/goods/modifyShopGoods', {
					'goodsId': id,
					'goodsStatus': status
				});
				this.get_value()
			},
			// 获取数据
			get_value() {
				this.$http.get(
						'http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList', {
							params: this.select_list,
						})
					.then((res) => {
						// console.log(res.data.data.list)
						if (res.status == 200) {
							this.tableData = res.data.data.list
							this.select_list.total = res.data.data.total
						} else {
							this.$message.error('数据获取失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 每页条数改变
			handleSizeChange(size) {
				this.select_list.pageSize = size
				this.get_value()
			},
			// 页码改变
			handleCurrentChange(num) {
				this.select_list.pageNum = num
				this.get_value()
			},
		},
		mounted() {
			this.get_value()
		},
		watch: {
			// 监听搜索日期变化
			dataValue(newdata) {
				this.select_list.startTime = newdata[0]
				this.select_list.endTime = newdata[1]
			},
			show_UpDown(newvalue) {
				// console.log(newvalue)
				if (newvalue == '全部门店') {
					this.select_list.goodsStatus = ''
				} else if (newvalue == '上架中') {
					this.select_list.goodsStatus = 1
				} else if (newvalue == '已下架') {
					this.select_list.goodsStatus = 0
				}
				this.get_value()
			}
		},
	}
</script>

<style>
	.inp {
		margin-bottom: 10px;
		display: flex;
		flex-flow: wrap;
		justify-content: start;
	}

	.inp .block {
		margin-top: 10px;
		margin-right: 20px;
	}

	.classify {
		width: 300px;
		display: flex;
		flex-flow: nowrap;
		justify-content: space-around;
	}

	.classify .active {
		color: #00ffff;
	}
</style>